<template>
  <div style="margin: 1%  2%">
  
  <el-button 
    type="primary" 
    style="margin-bottom:1%"
    @click="addVisible = true"
    >
    新增分类<i class="el-icon-upload el-icon--right"></i>
    </el-button>

  <el-table
    :data="list"
    border
    style="width: 100%"
    >
    <!-- <el-table-column
      prop="id"
      label="分类id"
      min-width="8%">
    </el-table-column> -->
    <el-table-column
      prop="name"
      label="分类名称"
      min-width="10%">
    </el-table-column>
    <el-table-column
      prop="parentName"
      label="父分类名称"
      min-width="10%">
    </el-table-column>
    <el-table-column
        prop="creatTime"
        label="创建时间"
        min-width="12%"
        >
            <template slot-scope="scope">
            <span style="margin-left: 3px">{{ scope.row.creatTime }}</span>
            </template>
        </el-table-column>
    
    <el-table-column
        prop="reviseTime"
        label="修改时间"
        min-width="12%"
        >
            <template slot-scope="scope">
            <span style="margin-left: 3px">{{ scope.row.reviseTime }}</span>
            </template>
        </el-table-column>

    <el-table-column
    prop="handle"
    label="操作"
    min-width="12%"
    align="center"
    >
        <template slot-scope="scope">
            <el-button
            size="mini"
            type="info"
            @click="handleEdit(scope.row.id)">编辑</el-button>

            <el-button
            size="mini"
            type="danger"
            style="margin-left: 5%"
            @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
    </el-table-column>
  </el-table>
  <el-pagination
    background
    @size-change="fetchData"
    @current-change="fetchData"
    :current-page.sync="currentPage"
    :page-sizes="[5, 10, 15, 20]"
    :page-size.sync="pageSize"
    layout="total, prev, pager, next, sizes"
    :total="total"
    style="margin-top:2%;float: right"
    >
  </el-pagination>

<!--添加分类弹出框-->
  <el-dialog
  title="添加分类"
  :visible.sync="addVisible"
  width="50%"
  :before-close="handleClose">
  
  <el-form 
    :model="addcategoy"
    ref="addcategoy"
    :rules="addrules"
    label-width="20%"
    >
    <el-form-item label="分类名称" prop="name">
        <el-input v-model="addcategoy.name" placeholder="请输入分类名称" ></el-input>
    </el-form-item>
    <el-form-item label="父分类" prop="parentId">
     <el-select v-model="addcategoy.parentId" placeholder="请选择父分类">
      <el-option
      v-for="item in pCategoryList"
      :key="item.value"
      :label="item.name"
      :value="item.id">
    </el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
     <el-button type="primary" @click="addCategory()">保存</el-button>
     <el-button  @click="handleClose()">关闭</el-button>
  </el-form-item>

  </el-form>
  
  </el-dialog>

  <!--修改分类弹出框-->
  <el-dialog
  title="修改分类"
  :visible.sync="editVisible"
  width="50%"
  :before-close="editHandleClose">
  
  <el-form 
    :model="editCategory"
    ref="editCategory"
    :rules="addrules"
    label-width="20%"
    >
    <el-form-item label="分类名称" prop="name">
        <el-input v-model="editCategory.name" placeholder="请输入分类名称" ></el-input>
    </el-form-item>
    <el-form-item label="父分类" prop="parentId">
     <el-select v-model="editCategory.parentId" placeholder="默认不修改">
      <el-option
      v-for="item in pCategoryList"
      :key="item.value"
      :label="item.name"
      :value="item.id">
    </el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
     <el-button type="primary" @click="editcategory()">修改</el-button>
     <el-button  @click="editHandleClose()">关闭</el-button>
  </el-form-item>

  </el-form>
  
  </el-dialog>

  </div>
</template>


<script>
import categoryApi from '@/api/category'
export default {
  data(){
      return {
        list:null,//数据列表
        total:0,//总记录数
        currentPage:  1,//当前页
        pageSize: 10,//每页大小
        addVisible: false,//新增窗口
        addcategoy:{},//新增分类实体
        pCategoryList:[],//父分类列表
        
        editVisible: false,//修改窗口
        editCategory:{},//修改分类实体

        addrules:{
          name:[{ required: true, message: '请输入分类名称', trigger: 'blur' },]
        }
      }
  },

  created(){
    this.fetchData() 
    this.fetchPCategory() 
  },

  methods:{
      
      editHandleClose(){ //修改弹出框回调
        this.editVisible = false
        this.$refs['editCategory'].resetFields()
      },

      handleClose(){  //增加弹出框回调
        this.addVisible = false
        this.$refs['addcategoy'].resetFields()
      },

      fetchData(){  //分页获取分类列表
        categoryApi.getPageList(this.currentPage,this.pageSize).then(response =>{
          this.list = response.items
          this.total = response.total
        })
      },

      fetchPCategory(){  //获取父分类列表
        categoryApi.getPCategoryList().then(response =>{
          this.pCategoryList = response
        })
      },

     addCategory(){   //增加分类
       categoryApi.saveCategory(this.addcategoy).then(response =>{
          if(response.flag){
            this.addVisible = false
            this.fetchData()
            this.$refs['addcategoy'].resetFields()
          }
          alert(response.message)
       }) 
     },

     handleEdit(id){  //根据ID获得修改分类数据
        
        categoryApi.findById(id).then(response =>{
          if(response.flag){
              this.editCategory = response.data
              this.editCategory.parentId = null
              this.editVisible = true
          }
        })
     },

     editcategory(){   //修改分类
       categoryApi.reviseCategory(this.editCategory).then(response =>{
          alert(response.message)
          if(response.flag){
            this.editVisible = false
            this.editCategory = {}
            this.fetchData()
          }
       })
     },
     handleDelete(id){  //删除分类
        categoryApi.deleteCategory(id).then(response =>{
          if(response.flag){
            this.fetchData() //刷新列表
            alert(response.message)
          }
        })
     }

  }
}
</script>

